<template>
    <view :style="album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumberClone)">
        <block class="child" v-for="(item, index) in showUrls" :key="index">
            <view
                :class="'imageContainer ' + album.dimBack(isLong, index, maxNumber, previewFullImage)"
                :style="album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)"
            >
                <image
                    :class="album.dim(isLong, index, maxNumber, previewFullImage) + '}'"
                    :id="index"
                    @tap="onPreviewTap"
                    :style="album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)"
                    :src="newType ? item[key] : item"
                    :mode="urls.length === 1 ? singleMode : multipleMode"
                />
                <view v-if="album.image(isLong, index, maxNumber, previewFullImage)" class="text">+{{ urls.length - maxNumber }}</view>
            </view>
        </block>
    </view>
</template>
<script module="album" lang="wxs" src="@/miniprogram_npm/lin-ui/album/index.wxs"></script>
<script>
export default {
    data() {
        return {
            newType: true,
            shortSideValue: 0,
            row: 0,
            colum: 0,
            showUrls: [],
            isLong: false
        };
    },

    externalClasses: ['l-class', 'l-single-image-class', 'l-multi-image-class'],

    props: {
        urls: {
            type: Array
        },
        preview: {
            type: Boolean,
            default: true
        },
        gapRow: {
            type: Number,
            default: 10
        },
        gapColumn: {
            type: Number,
            default: 10
        },
        singleSize: {
            type: Number,
            default: 360
        },
        multipleSize: {
            type: Number,
            default: 158
        },
        singleMode: {
            type: String,
            default: 'aspectFit'
        },
        multipleMode: {
            type: String,
            default: 'aspectFill'
        },
        key: {
            type: String,
            default: 'url'
        },
        maxNumber: {
            type: Number,
            default: 9
        },
        customRowNumber: {
            type: Boolean,
            default: false
        },
        everyRowNumber: {
            type: Number,
            default: 3
        },
        previewFullImage: {
            type: Boolean,
            default: true
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    watch: {
        urls: {
            deep: true,
            immediate: true,

            handler: function () {
                this.preview();
            }
        }
    },

    methods: {
        attached() {
            let e = [];
            if (this.urls.length > this.maxNumber) {
                e = this.urls.slice(0, this.maxNumber);
                this.setData({
                    isLong: true
                });
                console.warn('图片数量超过maxNumber指定数量');
            } else {
                e = this.urls;
            }
            this.setData({
                showUrls: e
            });
            if (!this.customRowNumber) {
                let e = this.showUrls.length;
                if (e > 1 && e < 5) {
                    this.setData({
                        everyRowNumberClone: 2
                    });
                } else {
                    this.setData({
                        everyRowNumberClone: 3
                    });
                }
            }
            this.preview();
        },

        judgeType() {
            const e = this.urls;
            return 0 === e.length || 'object' == typeof e[0];
        },

        horizontalOrVertical: function (e) {
            uni.getImageInfo({
                src: e,
                success: (e) => {
                    const t = e.width >= e.height ? e.width : e.height;
                    const a = e.width >= e.height ? e.height : e.width;
                    this.setData({
                        horizontalScreen: e.width >= e.height,
                        shortSideValue: (a * this.singleSize) / t
                    });
                }
            });
        },

        preview: function () {
            const e = this.judgeType();
            this.setData({
                newType: e
            });
            const t = this.urls;
            const a = this.key;
            if (1 === t.length) {
                this.horizontalOrVertical(e ? t[0][a] : t[0]);
            }
        },

        onPreviewTap(e) {
            const t = e.currentTarget.id;
            let a;
            if (this.previewFullImage) {
                a = this.urls;
            } else {
                a = this.showUrls;
            }
            let s = '';
            let i = [];
            const l = this.newType;
            const r = this.key;
            if (l) {
                s = a[t][r];
                for (let e = 0; e < a.length; e++) {
                    i.push(a[e][r]);
                }
            } else {
                s = a[t];
                i = a;
            }
            let h = {
                index: t,
                current: a[t],
                all: a
            };
            if (true === this.preview) {
                uni.previewImage({
                    current: s,
                    urls: i
                });
            }
            this.$emit(
                'lintap',
                {
                    detail: h
                },
                {}
            );
        }
    },

    created: function () {}
};
</script>
<style>
.container {
    display: grid;
}
.vertical {
    height: 360rpx;
}
.parent {
    display: inline-grid;
    grid-template-columns: repeat(auto-fill);
}
.child {
    box-sizing: border-box;
    background-color: #fff;
    flex: 0 0 44%;
    height: 100px;
    border: 1px solid red;
    margin-top: 4%;
    margin-left: 2%;
    margin-right: 2%;
}
.dimback {
    background: #000;
}
.dim {
    opacity: 0.6;
}
.imageContainer {
    position: relative;
}
.imageContainer:last-child > .text {
    color: #fff;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: larger;
}
</style>
